<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" href="./css/public.css">
		<link rel="stylesheet" href="./css/forgetpwd.css">
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<title>魔豆素材网</title>
	</head>
	<body>
		<!-- 头部 -->
		<div class="header-login w-m clearfix">
			<div class="left">
				<img src="./img/logo.png" alt="" srcset="">
				<span>登录</span>
			</div>
			<div class="right">
				<p><a href="modou.html">返回首页</a></p>
			</div>
		</div>
		<!-- 忘记密码 -->
		<div class="banner">
			<div class="bwrap w-m">
				<!-- <img src="./img/loginzi.png" alt="" srcset=""> -->
				<!-- 左侧广告 -->
				<div class="bwrap-left">
					<h2>魔豆素材网</h2>
					<p>海量原创素材<span>现已上线</span></p>
				</div>
				<!-- 右侧登录框 -->
				<form action="" id="form">
					<div class="login">
						<h3>忘记密码</h3>
						<div class="tel" id="telWrap">
							<span>手机号</span>
							<input type="text" name="tel" id="tel" placeholder="请输入手机号码">
						</div>
						<div class="yzm">
							<input type="text" name="yzm" id="sjyzm" placeholder="请输入手机验证码">
							<span>获取验证码</span>
						</div>
						<div class="tuyzm">
							<input type="text" name="tpyzm" id="tpyzm" placeholder="输入图片验证码">
							<!-- 验证码图片 -->
							<img class="code" id="changeCode" src="./img/yzm.png" alt="">
						</div>
						<div class="btn" id="next">
							<a href="javascript:;">下一步</a>						
						</div>
						<p><a href="login-register.html">返回登录</a></p>
					</div>
				</form>
			</div>
		</div>
		<!-- 底部 -->
		<footer class="footer">
			<ul class="nav">
				<li><a href="">关于我们</a></li>
				<li><a href="">友情链接</a></li>
				<li><a href="">个人会员版</a></li>
				<li><a href="">隐私协议</a></li>
				<li><a href="">服务条款</a></li>
				<li><a href="">联系我们</a></li>
				<li><a href="">加入我们</a></li>
			</ul>
			<p class="flink">
				<a href="">联合推广 market@163.com</a>
				<a href="">友链交换 market@163.com</a>
			</p>
			<p class="ewm"><img src="img/ewm.png"></p>
			<a href="" class="beian">Copyright © 2017 MIUI 京ICP备10046444号 | 京公网安备11010802020134号 | 京ICP证110507号</a>
		</footer>
		
		<script type="text/javascript">
			/*校验手机号码是否合法 */
			function isTelCode(str) {
				var reg= /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
				return reg.test(str);
			}
			layui.use(['util','jquery','layer'], function(){
				var $ = layui.$;
				var util = layui.util;
				var layer = layui.layer;
		
				// 手机号失去焦点验证 -- 忘记密码页面				
				var telyz = function(){
					var telValue = $('#tel').val();
					if(!isTelCode(telValue)){
						layer.tips(
							'<p style="color:#fff;">请输入正确的手机号~~</p>',
							'#tel',
						{
							tips: [3, '#00cc90'],
							anim: 6,
							time: 2500,
						});						
					}else{
						return true;
					}
				}
				var syzm= function() {
					var sjValue = $('#sjyzm').val();
					if(!sjValue){
						layer.tips(
							'<p style="color:#fff;">请输入手机验证码~~</p>',
							'#sjyzm',
						{
							tips: [3, '#00cc90'],
							anim: 6,
							time: 2500,
						});
					}else{
						return true;
					}
				}
				var tyzm= function() {
					var tpValue = $('#tpyzm').val();
					if(!tpValue){
						layer.tips(
							'<p style="color:#fff;">请输入图片验证码~~</p>',
							'#tpyzm',
						{
							tips: [3, '#00cc90'],
							anim: 6,
							time: 2500,
						});
					}else{
						return true;
					}
				}
				$('#tel')[0].onblur = telyz;
				$('#sjyzm')[0].onblur = syzm;				
				$('#tpyzm')[0].onblur =tyzm;
				$("#next").click(function(){					
					if(telyz()){
						if(syzm()){
							if(tyzm()){
								// window.open("forgetpwd2.html")
								window.location.href = "forgetpwd2.html";
							}
						}
					}
				})
				// 切换验证码
				$("#changeCode").click(function(){
					layer.alert("切换验证码！")
				})
				document.onkeyup = function (e) {
				    var ev = document.all ? window.event : e;
				    if (ev.keyCode === 13) {
				        $('#next').click();
				    }
				};
				function fn1() {
					fn2();
					var endTime = new Date().getTime()+59*1000 //假设为结束日期
					,serverTime = new Date().getTime(); //假设为当前服务器时间，这里采用的是本地时间，实际使用一般是取服务端的
					util.countdown(endTime, serverTime, function(date, serverTime, timer){
					  $('.yzm span').addClass('oonn')
					  $('.yzm span').html(date[3] + '秒');
					  if (date[3] == '0') {
						fn3();
						$('.yzm span').html('获取验证码');
						$('.yzm span').removeClass('oonn')
					  }
					});
				}
				function fn2() {
					$('.yzm span')[0].removeEventListener('click',fn1);
				}
				function fn3() {
					$('.yzm span')[0].addEventListener('click',fn1,false);
				}
				fn3()
			});
		</script>
	</body>
</html>
